/**
 * 质量安全通告浏览
 */
<template>
	<el-container>
		<el-aside width="280px" class="mt10 ml10 mb10">
			<el-card class="h100">
				<el-segmented
					v-model="noticeType"
					:options="noticeTypes"
					direction="vertical"
					block
					:props="{value: 'bh'}"
				>
					<template #default="scope">
						<el-badge v-if="!scope.item.disabled" :value="noticeTypeUnreadCount(scope.item.bh)" :show-zero="false" :offset="[-27, 13]" class="w100">
							<vp-label :zh="scope.item.lxZh" :en="scope.item.lxEn" align="left"  />
						</el-badge>
						<div v-else class="notice-title">
							<div>栏目内容</div>
							<div>Column Content</div>
							<el-divider class="mt10 mb0" />
						</div>
					</template>
				</el-segmented>
			</el-card>
		</el-aside>
		<el-main class="layout-parent">
			<vp-main-page @refresh="loadDataList" :tableRef="tableRef">
				<template #search>
					<el-form ref="searchFormRef" :model="searchForm" @submit.prevent @keyup.enter="loadDataList" label-width="120px">
						<vp-search-row show-more>
							<vp-search-col :span="2">
								<el-form-item prop="fbsj">
									<template #label><vp-label zh="发布时间" en="Publish Date"/></template>
									<el-date-picker
										v-model="searchForm.fbsj"
										type="daterange"
										start-placeholder="开始日期/Start Date"
										end-placeholder="结束日期/End Date"
										value-format="YYYY-MM-DD"
										unlink-panels
										range-separator="-"
										class="w100"
									>
									</el-date-picker>
								</el-form-item>
							</vp-search-col>
							<vp-search-col>
								<el-form-item prop="ggbt">
									<template #label><vp-label zh="标题/内容" en="Title/Content"/></template>
									<el-input v-model="searchForm.ggbt" v-trim></el-input>
								</el-form-item>
							</vp-search-col>
							<vp-search-col btn-col>
								<vp-btn-search :loading="loading" @click="loadDataList"/>
								<vp-btn-reset @click="handleSearchReset"/>
							</vp-search-col>
						</vp-search-row>
					</el-form>
				</template>
				<template #table>
					<vp-vxe-table
						id="qualitySafetyNoticeViewTable"
						ref="tableRef" 
						:data="tableData" 
						@sort-change="handleSortChange" 
						row-key="id"
						v-loading="loading"
					>	
						<vxe-column type="seq" align="center" title="#" width="50" />
						<vxe-column 
							field="ggbt" 
							title="标题 Title"
							show-overflow
							min-width="250"
						>
							<template #header><vp-label zh="标题" en="Title"/></template>
							<template #default="scope">
								<el-space>
									<img src="/images/new.png" v-if="scope.row.jsbs !== 1" style="width: 30px;height: 30px;" />
									<el-link @click="handleView(scope.row.id)">{{ scope.row.ggbt }}</el-link>
								</el-space>
							</template>
						</vxe-column>
						<vxe-column 
							field="fj" 
							title="附件 Attachment"
							show-overflow
							width="200"
						>
							<template #header><vp-label zh="附件" en="Attachment"/></template>
							<template #default="scope">
								<RowAttachment 
									:attachmentList="scope.row.attachments" 
									readOnly
								/>
							</template>
						</vxe-column>
						<vxe-column 
							sortable
							field="fbsj" 
							title="发布时间 Publish Time"
							show-overflow 
							width="160"
						>
							<template #header><vp-label zh="发布时间" en="Publish Time"/></template>
						</vxe-column>
					</vp-vxe-table>
				</template>
				<template #pagination>
					<vp-pagination
						@change="loadDataList"
						:total="page.total" 
						v-model:currentPage="page.pageNum"
						v-model:pageSize="page.pageSize"
					>
					</vp-pagination>
				</template>
			</vp-main-page>
		</el-main>
	</el-container>
</template>
<script setup lang="ts" name="qualitySafetyNoticeView">
import { computed, onMounted, reactive, ref, watch } from 'vue'
import request from '/@/utils/request';
import { useRouter } from 'vue-router';
import { DEFAULT_PAGE } from '/@/utils/page';
import RowAttachment from '/@/components/vp/file/VpRowAttachment.vue';

const searchForm = reactive({
	fbsj: [],
	ggbt: "",
	xxgs: "",
	ztList: [20]
});

const page = reactive({
	...DEFAULT_PAGE,
})

const noticeType = ref('');

const noticeTypes = ref([] as any[]);

const loading = ref(false);
const tableData = ref([]);

const router = useRouter();

watch(()=> noticeType.value, ()=>{
	loadDataList();
})

// 加载通告类型
const loadNoticeTypes = () => {
    request.get('/basicData/customItem/list', {
        params: {
            items: 'QUALITY_SAFETY_NOTICE_TYPE',
        }
    }).then((res) => {
        if (res.data && res.data.length > 0) {
            const sznr = res.data[0].sznr;
			noticeTypes.value = JSON.parse(sznr) || [];
			noticeType.value = noticeTypes.value[0].bh;
			noticeTypes.value.unshift({
				bh: '-',
				lxZh: '栏目内容',
				lxEn: 'Column Content',
				disabled: true,
			});
        }
    })
}

// 加载未读数量
const unreadCount = ref([]);
const loadUnreadCount = () => {
	request.get('/quality/safetyNotice/unread/count').then(res => {
		unreadCount.value = res?.data || [];
	})
}

// 单个类型的未读数量
const noticeTypeUnreadCount = computed(() => {
	return (gglx: string) => {
		const obj = (unreadCount.value || []).find((count: any) => {
			return count.gglx === gglx;
		}) as any;
		return obj ? obj.sl : 0;
	}
});

// 加载列表数据
const loadDataList = () => {
	if (noticeType.value) {
		loading.value = true;
		request.get('/quality/safetyNotice/list', {
			params: {
				...searchForm,
				...page,
				gglx: noticeType.value
			}
		}).then(res => {
			tableData.value = res?.data?.list || [];
			page.total = res?.data?.total || 0;
			page.pageNum = res?.data?.pageNum || 1;
			loadUnreadCount();
		}).finally(()=>{
			loading.value = false;
		})
	}
}

const searchFormRef = ref();
// 重置搜索条件
const handleSearchReset = ()=>{
	searchFormRef.value.resetFields();
}

// 列表字段排序
const handleSortChange = (column: any)=>{
	page.sortColumn = column.field;
	page.sortOrder = column.order;
	loadDataList()
}

onMounted(() => {
	loadNoticeTypes();
	loadDataList();
})

const tableRef = ref();

const handleView = (id: string)=>{
	router.push({
		name: "viewQualitySafetyNotice",
		params: {
			id: id,
		},
	})
	setTimeout(() => {
		loadDataList();
	}, 1500)
}

</script>

<style scoped lang="scss">
.notice-title {
    height: 50px;
    font-size: 16px;
    text-align: center;
    font-weight: bold;
	.notice-title-zh {
		line-height: 25px;
	}
	.notice-title-eh {
		line-height: 20px;
	}
}
:deep(.el-segmented) {
	padding-top: 0;
}
:deep(.el-segmented__item-label) {
	text-align: left;
	padding-left: 10px;
}
:deep(.el-segmented__item.is-disabled) {
	color: #6c6e70;
}
</style>